<%@page import="java.util.Locale"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="com.tubeonfire.util.ApplicationHelper"%>
<%@page import="com.tubeonfire.model.AdvertisingModel"%>
<%@page import="com.tubeonfire.entity.Advertising"%>
<%@page import="com.google.appengine.api.users.User"%>
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@page import="com.google.appengine.api.users.UserService"%>
<%@page import="com.tubeonfire.model.admin.SiteConfigModel"%>
<%@page import="com.tubeonfire.entity.SiteConfig"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="com.tubeonfire.model.TubeModel"%>
<%@page import="com.tubeonfire.entity.Tube"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%		
	request.setCharacterEncoding("UTF-8");
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	Tube tub = (Tube)request.getAttribute("obj");		
	SiteConfig siteConfig = SiteConfigModel.get();	
	StringBuilder tempString = new StringBuilder();
	for(String tag : tub.getTags()){
		tempString.append(tag + ", ");
	}
	String logoUrl = siteConfig.getLogoKey();
	if(!logoUrl.equals("/images/logo.png")){ 
		logoUrl = "http://" + request.getServerName() + "/image?key=" + logoUrl + "&size=250";	
	}
	String pageImageUrl = tub.getImageUrl();
	if(!pageImageUrl.contains("http://")){
		pageImageUrl = "http://" + request.getServerName() + "/image?key=" + pageImageUrl + "&size=250";												
	}
	String siteName = siteConfig.getSiteName();
	String pageUrl = (String)request.getAttribute("url");
	String pageTitle = tub.getTitle();
	String pageName = siteConfig.getSiteName();
	String pageDescription = tub.getSubDescription();
	String pageKeyword = tempString.toString();
	String pageImage = pageImageUrl;
	String facebookAdminId = siteConfig.getFacebookAdminId();		
	String pageLogoUrl = logoUrl;
	String pageLogoSlogan = siteConfig.getLogoSlogan();
	String analyticCode = siteConfig.getAnalyticCode();
	int place = 2;
	int position = 1;	
	NumberFormat nf = NumberFormat.getNumberInstance(Locale.US);
%>
<jsp:include page="/element/header.jsp">	
	<jsp:param name="siteName" value="<%= siteName %>"/>	
	<jsp:param name="pageUrl" value="<%= pageUrl %>"/>
	<jsp:param name="pageTitle" value="<%=pageTitle %>"/>	
	<jsp:param name="pageName" value="<%=pageName %>"/>
	<jsp:param name="pageImages" value="<%=pageImage %>"/>
	<jsp:param name="pageKeyword" value="<%=pageKeyword %>"/>
	<jsp:param name="pageDescription" value="<%=pageDescription %>"/>
	<jsp:param name="facebookAdminId" value="<%=facebookAdminId %>"/>
	<jsp:param name="pageLogoUrl" value="<%=pageLogoUrl %>"/>
	<jsp:param name="pageLogoSlogan" value="<%=pageLogoSlogan %>"/>
</jsp:include>
<script>      
      var tag = document.createElement('script');      
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '371',
          width: '660',
          videoId: '<%=tub.getId()%>',
          playerVars: { 'autoplay': 0, 'controls': 1, 'showinfo' : 0, 'modestbranding' : 1, 'iv_load_policy':3, 'rel' : 0},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {          
          done = true;          
        }
      }
      function stopVideo() {    	  
        player.pauseVideo();
      }
      function reportError() {      	 
    	 var url = player.getVideoUrl();
    	 var videoid = url.replace(/^[^v]+v.(.{11}).*/,"$1");     	 
    	 if(confirm('Are you sure this video is unavailable ?')){
    		  var xhr = new XMLHttpRequest();
        	  xhr.open('GET', '/report-error?id=' + videoid, true);     
        	  xhr.send(null);
        	  alert('Report has been sent ! Thank you !');  
    	 }
      }      
    </script>
<header>        	
       <div id="header" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
      		<meta itemprop="duration" content="T<%=tub.getDuration() %>S" />
			<meta itemprop="thumbnailUrl" content="<%=pageImageUrl %>" />
			<meta itemprop="contentURL" content="http://<%=request.getServerName()%>/video/<%=tub.getId() %>/<%=tub.getAlias()%>.html" />
			<meta itemprop="embedURL" content="http://www.youtube.com/watch?v=<%=tub.getId() %>" />
			<meta itemprop="uploadDate" content="<%=tub.getUpdated() %>" />																			
			<meta itemprop="description" content="<%=tub.getSubDescription() %>" />				
           <div id="header_inner">                   	
               <h1 class="watch-headline-title"><%=tub.getTitle()%></h1>
               <div id="video" class="clearafter">
                   <div class="watch-player">     
	                   <div id="player"></div>                      	                                          						
                   </div>                  
                   <div class="related-video">
                       <ul>                                                
                       	<%
                       		List<Tube> listRelate = new ArrayList<Tube>();
	                       	TubeModel model = new TubeModel();
	                   		model.setLimit(10);
	                   		model.prepareRelateTube(tub);	
	                   		listRelate = model.getListResult();                   		                       		                       		                      		                          
                       		int count = 1;
							if(listRelate!=null && listRelate.size()>0){
							for(Tube relateTub: listRelate){
								String imgUrl = relateTub.getImageUrl();
								if(!imgUrl.contains("http://")){
									imgUrl = "/image?key=" + imgUrl + "&size=120";													
								}
								if(relateTub.getId().equalsIgnoreCase(tub.getId())){
									continue;
								}
			  			%>
                           <li>
                           		<a href="/video/<%=relateTub.getId() %>/<%=relateTub.getAlias() %>.html" title="<%=relateTub.getTitle()%>">
	                            	<span class="thumb-image-wrap">
		                           		<span class="video-thumb">
			                           		<span class="thumb-clip">
				                           		<span class="thumb-clip_inner">
				                                   	<img title="<%=relateTub.getTitle() %>" src="<%=imgUrl %>" style="width: 120px;" alt="<%=relateTub.getTitle()%>"/>
													<span class="vertical-align"></span>
				                               	</span>
			                                </span>
		                                </span>
	                                </span>
								</a>
								<a href="/video/<%=relateTub.getId() %>/<%=relateTub.getAlias() %>.html" title="<%=relateTub.getTitle()%>">
                                	<span class="title" title="<%=relateTub.getTitle()%>"><%=relateTub.getTitle() %></span>
                                </a>
                                <a href="/author/<%=relateTub.getAuthor()%>" title="View all videos from <%=relateTub.getAuthor()%>"><span class="stat">by <%=relateTub.getAuthor() %></span></a>                                
                                <span class="stat"><%=nf.format(relateTub.getView()) %> view<%=relateTub.getView()>1?"s":"" %></span>                           		
                           </li>                           
                        <%
                        		count++;                              			
							}
						}
                        %>                              
                       </ul>
                   </div>
               </div>
               <div style="margin-top: 9px; width: 660px">
                   <a href="http://www.youtube.com/embed/<%=tub.getId() %>?autoplay=1&loop=1&playlist=<%=tub.getId() %>" onclick="stopVideo();"  class="button yellow repeat various fancybox.iframe"><span class="icon-repeat">Repeat</span></a>
                   <a href="/playlist/<%=tub.getPlaylistId() %>/video-playlist" class="button green" title="View current Playlist">
                   		<span>Current Playlist</span>
                   </a>
                   <a href="/author/<%=tub.getAuthor() %>" class="button green" title="View all video from <%=tub.getAuthor()%>">
                   		<span><%=tub.getAuthor() %>'s Video</span>
                   </a>  
                   <a onclick="reportError();" href="#" class="button green" title="Report error video">
                 		<span>Report Error</span>
                   </a>     
                   <%						
						if(user!=null&&userService.isUserAdmin()){
					%>
					<a href="/admin/tube/edit?id=<%=tub.getId() %>" target="blank" class="button orange"><span class="icon-pencil">Edit</span></a>
					<%
						}
					%>   
					<span style="color: #333;margin-right:10px; margin-top:6px; float: right;">
						<span style="font-weight: bold; font-size: 18px"><%=nf.format(tub.getView()) %></span> view<%=tub.getView()>1?"s":"" %>
					</span>  					  					                
               </div>               
           </div>
       </div>
</header>
<div id="content">
	<div id="content_inner">
    	<div class="video-info clearafter">
        	<div class="left">    
				<%
        		 	Advertising obj = AdvertisingModel.getByPlaceAndPosition(place, position);
                   	if(obj!=null&&obj.getId().length()>0){
				%>
                    	<div class="advWrap adv-468x60 clearafter" style="border: none;">
	                    	<div>
	                    		<%
		          					if(obj.getType()==1){
		          				%>
		          						<%=obj.getContent() %>	
								<%
		          					}else{
		          						String imgUrl = obj.getContent();          						
		    							if(!imgUrl.contains("http://")){
		    								imgUrl = "/image?key=" + imgUrl + "&size=468";															
		    							}
		          			    %>
		          						<a title="<%=obj.getTitle()%>" href="<%=obj.getLink()%>">
		          							<img alt="<%=obj.getTitle() %>" src="<%=imgUrl%>">
		          						</a> 
								<%
		          					}
		          				%>    
							</div>
	                    </div>  		
				<%
                   	}else if(user!=null&&userService.isUserAdmin()){
                %>
                    <div class="advWrap adv-468x60 clearafter">
	                	<div>
	                    	<a href="/admin/advertising/add?place=<%=place %>&position=<%=position %>" title="Add Advertising">Add Advertising Here (468 x 60)</a>
				        </div>
	                </div>
                <%
                   	}
				%>         	          
	                <!-- AddThis Button BEGIN -->
					<div class="addthis_toolbox addthis_default_style ">
						<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
						<a class="addthis_button_tweet" tw:via="<%=siteConfig.getTwiterName()%>"></a> 
						<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
						<a class="addthis_counter addthis_pill_style"></a>
					</div>
					<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ef062a536300433"></script>
					<!-- AddThis Button END -->							
				<%
					if(tub.getDescription().length()>1){
				%>  
		               <div class="video-des">
		                  <%=tub.getDescription()%>  		                  
		               </div>  
	            <%
					}else if(user!=null&&userService.isUserAdmin()){
				%>
						<div class="addTubeInfor adv-468x60 clearafter">
                    		<div>
	                    		<a target="blank" href="/admin/tube/edit?id=<%=tub.getId() %>#title" title="Add Video Description">This tube has no description. Add Description.</a>
				            </div>
	                    </div>
				<%
					}
	            %>
				<%
					position = 2;
       		 		obj = AdvertisingModel.getByPlaceAndPosition(place, position);
                  	if(obj!=null&&obj.getId().length()>0){
				%>
                   	<div class="advWrap adv-468x60 clearafter" style="border: none;">
                    	<div>
						<%
							if(obj.getType()==1){
	          			%>
	          					<%=obj.getContent() %>	
	          			<%
	          				}else{
	          					String imgUrl = obj.getContent();          						
    							if(!imgUrl.contains("http://")){
    								imgUrl = "/image?key=" + imgUrl + "&size=468";															
    							}
						%>
	          					<a title="<%=obj.getTitle()%>" href="<%=obj.getLink()%>">
	          						<img alt="<%=obj.getTitle() %>" src="<%=imgUrl%>">
	          					</a> 
	          			<%
	          				}
	          			%>    
						</div>
                    </div>  		
				<%
                  	}else if(user!=null&&userService.isUserAdmin()){
                %>
                   	<div class="advWrap adv-468x60 clearafter">
                    	<div>
                    		<a href="/admin/advertising/add?place=<%=place %>&position=<%=position %>" title="Add Advertising">Add Advertising Here (468 x 60)</a>
			             </div>
                    </div>
				<%
                  	}
                %>   
                                 
				<%
               		if(tub.getTags().size()>1){	
               	%>
					<div class="tags video-tags">
						<h3>Tags</h3>
                   			<ul>
	                   		<%
	                   			for(String tag: tub.getTags()){
	                   		%>
	                       		<li><a href="/keyword/<%=tag%>" title="<%=tag%>"><%=tag %></a></li>                             
	                   		<%
	                   			}
	                   		%>
                   			</ul>
               		</div>
				<%
               		}else if(user!=null&&userService.isUserAdmin()){
               	%>               		
               		<div class="addTubeInfor adv-468x60 clearafter">
                    	<div>
                    		<a target="blank" href="/admin/tube/edit?id=<%=tub.getId() %>#tags" title="Add Video Tag">This tube has no tag. Add Tag.</a>
			             </div>
                    </div>
               	<%
               		}
					position = 3;
       		 		obj = AdvertisingModel.getByPlaceAndPosition(place, position);
                  	if(obj!=null&&obj.getId().length()>0){
                %>
                   	<div class="advWrap adv-468x60 clearafter" style="border: none;">
                    	<div>
                    	<%
	          				if(obj.getType()==1){
	          			%>
	          				<%=obj.getContent() %>	
	          			<%
	          				}else{
	          					String imgUrl = obj.getContent();          						
    							if(!imgUrl.contains("http://")){
    								imgUrl = "/image?key=" + imgUrl + "&size=468";															
    							}
	          			%>
								<a title="<%=obj.getTitle()%>" href="<%=obj.getLink()%>">
	          						<img alt="<%=obj.getTitle() %>" src="<%=imgUrl%>">
	          					</a> 
	          			<%
	          				}
	          			%>    
						</div>
                    </div>  		
				<%
                	}else if(user!=null&&userService.isUserAdmin()){
                %>
                   	<div class="advWrap adv-468x60 clearafter">
                    	<div>
                    		<a href="/admin/advertising/add?place=<%=place %>&position=<%=position %>" title="Add Advertising">Add Advertising Here (468 x 60)</a>
			             </div>
                    </div>
				<%
                	}                  	
				%>
             		
            	<%               
					if(tub.getOtherTags().size()>1){
            	%>
					<div class="tags video-tags">
                   		<h3>Other Tags</h3>
                  			<ul>
                   			<%
                   				for(String tag : tub.getOtherTags()){
                  			%>
                       			<li><a href="/keyword/<%=tag%>" title="<%=tag%>"><%=tag %></a></li>                          
                   			<%
                   				}
                   			%>
                   			</ul>
               		</div>
               	<%
               		}else if(user!=null&&userService.isUserAdmin()){
               	%>
               		<div class="addTubeInfor adv-468x60 clearafter">
                    	<div>
                    		<a target="blank" href="/admin/tube/edit?id=<%=tub.getId() %>#otherTags" title="Add Video Other Tag">This tube has no other tag. Add Other Tags.</a>
			             </div>
                    </div>
				<%
               		}
            		position = 4;
       		 		obj = AdvertisingModel.getByPlaceAndPosition(place, position);
                  	if(obj!=null&&obj.getId().length()>0){
				%>
                   	<div class="advWrap adv-468x60 clearafter" style="border: none;">
                    	<div>
                    	<%
	          				if(obj.getType()==1){
	          			%>
	          				<%=obj.getContent() %>	
	          			<%
	          				}else{
	          					String imgUrl = obj.getContent();          						
    							if(!imgUrl.contains("http://")){
    								imgUrl = "/image?key=" + imgUrl + "&size=468";															
    							}
	          			%>
	          					<a title="<%=obj.getTitle()%>" href="<%=obj.getLink()%>">
	          						<img alt="<%=obj.getTitle() %>" src="<%=imgUrl%>">
	          					</a> 
	          			<%
	          				}
	          			%>    
						</div>
                    </div>  		
				<%
                  	}else if(user!=null&&userService.isUserAdmin()){
				%>
                   	<div class="advWrap adv-468x60 clearafter">
                    	<div>
                    		<a href="/admin/advertising/add?place=<%=place %>&position=<%=position %>" title="Add Advertising">Add Advertising Here (468 x 60)</a>
			             </div>
                    </div>
				<%
                  	}
				%>  
               		<div class="clearafter">                	
                </div>
           </div>
           
           <div class="right">           		
               	<div class="video-comment" id="comment">
				<h3>Comment</h3>                                                  
                   	<script src="http://connect.facebook.net/en_US/all.js#appId=165471683512060&amp;xfbml=1"></script>
                   	<fb:comments href="<%=pageUrl %>" width="428"/>
                    <div class="clearbreak"></div>                    
                </div>    
                <%     
                	position = 5;
       		 		obj = AdvertisingModel.getByPlaceAndPosition(place, position);
                  	if(obj!=null&&obj.getId().length()>0){
				%>
                   	<div class="advWrap adv-336x280 clearafter" style="border: none;">
                    	<div>
                    	<%
	          				if(obj.getType()==1){
	          			%>
	          				<%=obj.getContent() %>	
	          			<%
	          				}else{
	          					String imgUrl = obj.getContent();          						
    							if(!imgUrl.contains("http://")){
    								imgUrl = "/image?key=" + imgUrl + "&size=468";															
    							}
	          			%>
	          					<a title="<%=obj.getTitle()%>" href="<%=obj.getLink()%>">
	          						<img alt="<%=obj.getTitle() %>" src="<%=imgUrl%>">
	          					</a> 
	          			<%
	          				}
	          			%>    
						</div>
                    </div>  		
				<%
                	}else if(user!=null&&userService.isUserAdmin()){
				%>
                   	<div class="advWrap adv-336x280 clearafter">
                    	<div>
                    		<a href="/admin/advertising/add?place=<%=place %>&position=<%=position %>" title="Add Advertising">Add Advertising Here (336 x 280)</a>
			             </div>
                    </div>
                <%
                  	}
				%>                             
           </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$(".various").fancybox({
			maxWidth	: 800,
			maxHeight	: 600,
			fitToView	: false,
			width		: '60%',
			height		: '60%',
			autoSize	: false,
			closeClick	: true,
			closeBtn    : false,
			openEffect	: 'fade',
			closeEffect	: 'fade'
		});	
	});		
</script>
<jsp:include page="/element/footer.jsp">
	<jsp:param name="analyticCode" value="<%=analyticCode %>"/>
</jsp:include>